<!doctype html>
<html lang="zh-CN">

<head>
    <title>主页</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./css/animate.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/el/index.css">
    <link rel="stylesheet" href="./css/jquery.mytooltip.css">
    <link rel="stylesheet" href="./css/hea-com.css">
    <link rel="stylesheet" href="./css/bind-alipay.css">
    <link rel="stylesheet" href="./css/bind-bank1.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src='./js/jquery.min.js'></script>
    <script src="./js/jquery.cookie.js"></script>
    <script src="./js/com.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./component/hea.js"></script>
    <script src="./component/bindAlipay.js"></script>
    <script src="./component/bindBank.js"></script>
    <script src="./js/el/index.js"></script>
    <script src="./js/jquery.mytooltip.js"></script>
</head>

<body>
    <div id='app' v-cloak>

        <!-- 设置交易密码框  第一次进来没设置交易密码弹出-->
        <div id='mask' v-if='offSetPas'></div>
        <transition enter-active-class='animated bounceInDown' leave-active-class='animated fadeOutUp'>
            <div id='mask-1' v-if='offSetPas'>
                <div class='mask-con'>
                    <div class='dis-spa edit-tit'>
                        <span style="opacity:0;">1</span>
                        <span>设置交易密码</span>
                        <img src="./img/close.svg" style="width:22px;height:22px;opacity: 0;">
                    </div>
                    <div class='mask-con-wrap'>
                        <div class='edit-input'>
                            <input type="text" placeholder="请输入6位数字作为交易密码">
                        </div>
                        <div class='edit-input'>
                            <input type="text" placeholder="确认交易密码">
                        </div>
                        <p class='edit-noti'>这里是一条提示内容</p>
                        <div class='edit-sure'>
                            <button>确认</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 设置交易密码框 -->

        <!-- 我要复投弹窗 -->
        <div id='mask' v-if='offFutou'></div>
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div id='mask-1' v-if='offFutou'>
                <div class='mask-con'>
                    <h1 class='futou-tit'>我要复投</h1>
                    <div class='futou-cent'>
                        <p>
                            <span>玩法：</span>
                            <span>五星-直选复式</span>
                        </p>
                        <p>
                            <span>号码：</span>
                            <span>13245212313241534121523414511111</span>
                        </p>
                        <p>
                            <span>模式：</span>
                            <span>元模式</span>
                            <span>，奖金：</span>
                            <span>154542</span>
                            <span>，返点：</span>
                            <span>0%</span>
                        </p>
                        <p>
                            共 <span style="color:#2590fe;">1000</span>注，<span style='color:#2590fe;'>3</span>倍，共计<span style='color:#2590fe;'>5200</span>元
                        </p>
                        <div class='futou-count'>
                            复投期数
                            <p class='dis-cen'>
                                <span class='hover'>-</span>
                                <span>3</span>
                                <span class='hover'>+</span>
                            </p>
                            共<span>18000</span>元
                        </div>
                        <p class='futou-noti'>账户余额不足</p>
                        <div class='dis-spa futou-controll'>
                            <button class='hover' @click='offFutou=false;'>取消</button>
                            <button class='hover'>确认复投</button>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <!-- 我要复投弹窗 -->

        <!-- 绑定支付宝账号 -->
        <bind-alipy :open='bindAB=="1"?true:false' @close_alipy='bindAB=false'></bind-alipy>
        <!-- 绑定支付宝账号 -->

        <!-- 绑定银行卡 -->
        <bind-bank1 :open='bindAB=="2"?true:false' @close_bank='bindAB=false'></bind-bank1>
        <!-- 绑定银行卡-->

        <hea-component @bind_alipy="bindAB='1'" @bind_bank="bindAB='2'" :user_info='userInfo' :user_balance='userBalance'></hea-component>

        <div class='jackpot-wrap'>
            <div class='dis-spa margin-center'>
                <div class='dis-spa jack-left'>
                    <img src="./img/shishicai.png">
                    <div class='other-time-tit'>
                        <p>
                            <span>重庆时时彩</span>
                            <span v-text="betRound.RoundID+'期'">2018121999期</span>
                        </p>
                        <p>
                            <span>
                                剩余投注时间：
                            </span>
                            <img :src="timeNum[0]">
                            <img :src="timeNum[1]">
                            <img src="./img/maohao.png">
                            <img :src="timeNum[2]">
                            <img :src="timeNum[3]">
                            <img src="./img/maohao.png">
                            <img :src="timeNum[4]">
                            <img :src="timeNum[5]">
                        </p>
                    </div>
                </div>
                <div class='jack-right'>
                    <div class="dis-spa">
                        <p>{{lastRount.RoundID}}期&nbsp;开奖号码 </p>&nbsp;&nbsp;&nbsp;
                        <img src="./img/zousi.svg" style="height:15px;width:15px;">
                        <span style="font-size:12px;color:#999999;">号码走势</span>
                    </div>
                    <div class='dis-spa jack-yes-num'>
                        <img :src="lastNum[0]">
                        <img :src="lastNum[1]">
                        <img :src="lastNum[2]">
                        <img :src="lastNum[3]">
                        <img :src="lastNum[4]">
                    </div>
                </div>
            </div>
        </div>

        <div class='dis-spa game-meth-tit'>
            <div class='dis-spa game-tit-left'>
                <span @click='$message.error("暂未开放")'>五星</span>
                <span @click='$message.error("暂未开放")'>四星</span>
                <span @click='$message.error("暂未开放")'>后三</span>
                <span @click='$message.error("暂未开放")'>中三</span>
                <span @click='$message.error("暂未开放")'>前三</span>
                <span @click='$message.error("暂未开放")'>后二</span>
                <span @click='$message.error("暂未开放")'>前二</span>
                <!-- @click='changePlay("dinwei",$event)' -->
                <span class='game-meth-active'>定位胆</span>
                <span @click='$message.error("暂未开放")'>不定位</span>
                <span @click='$message.error("暂未开放")'>大小单双</span>
                <span @click='$message.error("暂未开放")'>任选玩法</span>
            </div>
            <div class='game-tit-right'>
                <p @click='toggLo($event)' togg='1' class='hover'>历史开奖</p>
                <div class='play-meth-right' id='lottery' style="display:none;">
                    <p class='game-jack-num-tit'>
                        <span>期数</span>
                        <span>开奖号码</span>
                    </p>
                    <p v-for="(val,index) in hisList" :key='index'>
                        <span v-text='val.RoundID'>124351214531</span>
                        <span v-text='val.Result.split(",").join("")'>48751</span>
                    </p>
                </div>
            </div>
        </div>

        <div class='dis-spa margin-center' style="align-items:flex-start;" v-if="play=='wuxin'">
            <div class='play-meth-left'>
                <p>
                    <span>五星直选：</span>
                    <span @click='changeMeth("wuxinFu",$event)' class='play-meth-active'>直选复式</span>
                    <span @click='changeMeth("wuxinDan",$event)'>直选单式</span>
                    <span>五星组合</span>
                </p>
                <p>
                    <span>五星组选：</span>
                    <span>组选120</span>
                    <span>组选60</span>
                    <span>组选30</span>
                    <span>组选20</span>
                    <span>组选10</span>
                    <span>组选5</span>
                </p>
                <p>
                    <span>五星特殊：</span>
                    <span>一帆风顺</span>
                    <span>好事成双</span>
                    <span>三星报喜</span>
                    <span>四季发财</span>
                </p>
                <p>
                    <span>五星其他：</span>
                    <span>龙和虎</span>
                    <span>总和大小单双</span>
                </p>
                <div class='dis-spa'>
                    <span>从万位、千位、百位、十位、个位各选一个号码组成一注。所选号码与开奖号码相同，且顺序一致，即为中奖。</span>
                    <a class='tooltip hover' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="likeExa()">查看范例</a>
                </div>
            </div>
        </div>

        <div class='margin-center play-info-num' v-if='meth=="wuxinFu"'>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>万位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span class='rule-num-active'>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>千位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span class='rule-num-active'>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>百位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span class='rule-num-active'>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>十位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span class='rule-num-active'>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info'>
                <p class='rule-num'>
                    <i>
                        <span>个位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span class='rule-num-active'>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span class='rule-num-active'>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
        </div>

        <div class='margin-center dis-spa simplay-play-wrap' v-if='meth=="wuxinDan"'>
            <div class='simplay-left-wrap'>
                <textarea></textarea>
                <p>每一个号码之间请用一个空格【】、逗号【,】或者【;】隔开</p>
            </div>
            <div class='simplay-right-wrap'>
                <button>删除重复号</button>
                <button class='sim-righ-active'>导入文件</button>
                <button>清空</button>
            </div>
        </div>

        <div class='dis-spa margin-center' style="align-items:flex-start;" v-if="play=='daxiao'">
            <div class='play-meth-left'>
                <p>
                    <span>五星直选：</span>
                    <span class='play-meth-active'>前二大小单双</span>
                    <span>后二大小单双</span>
                    <span>前三大小单双</span>
                    <span>后三大小单双</span>
                </p>
                <div class='dis-spa'>
                    <span>从万位、千位、百位、十位、个位各选一个号码组成一注。所选号码与开奖号码相同，且顺序一致，即为中奖。</span>
                    <a class='tooltip hover' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="likeExa()">查看范例</a>
                </div>
            </div>
        </div>

        <div class='margin-center play-info-num' v-if='meth=="daxiaoqianer"'>
            <div class='dis-spa play-rule-info daxiao-qianer'>
                <p class='rule-num'>
                    <i>
                        <span>万位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>大</span>
                    <span>小</span>
                    <span class='rule-num-active'>单</span>
                    <span>双</span>
                </p>
                <p class='rule-font'>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info daxiao-qianer'>
                <p class='rule-num'>
                    <i>
                        <span>千位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>大</span>
                    <span>小</span>
                    <span class='rule-num-active'>单</span>
                    <span>双</span>
                </p>
                <p class='rule-font'>
                    <span>清</span>
                </p>
            </div>
        </div>

        <div class='dis-spa margin-center' style="align-items:flex-start;" v-if="play=='dinwei'">
            <div class='play-meth-left' style='margin-top:12px;'>
                <div class='dis-spa'>
                    <span>从万位、千位、百位、十位、个位任意位置上至少选择1个以上号码，所选号码与相同位置上的开奖号码一致，即为中奖。</span>
                    <a class='tooltip hover' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="likeExa('dinwei')">查看范例</a>
                </div>
            </div>
        </div>

        <div class='margin-center play-info-num' v-if='meth=="dinwei"'>
            <div class='dis-spa play-rule-info' @click="changeNum('First',$event);">
                <p class='rule-num'>
                    <i>
                        <span>万位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info' @click="changeNum('Second',$event)">
                <p class='rule-num'>
                    <i>
                        <span>千位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info' @click="changeNum('Third',$event)">
                <p class='rule-num'>
                    <i>
                        <span>百位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info' @click="changeNum('Fourth',$event)">
                <p class='rule-num'>
                    <i>
                        <span>十位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
            <div class='dis-spa play-rule-info' @click="changeNum('Fifth',$event)">
                <p class='rule-num'>
                    <i>
                        <span>个位</span>
                        <img src="./img/left-num.png" >
                    </i>
                    <span>0</span>
                    <span>1</span>
                    <span>2</span>
                    <span>3</span>
                    <span>4</span>
                    <span>5</span>
                    <span>6</span>
                    <span>7</span>
                    <span>8</span>
                    <span>9</span>
                </p>
                <p class='rule-font'>
                    <span>全</span>
                    <span>大</span>
                    <span>小</span>
                    <span>奇</span>
                    <span>偶</span>
                    <span>清</span>
                </p>
            </div>
        </div>

        <div class='margin-center dis-spa change-num-wrap'>
            <div class='change-num-left'>
                <span>
                    共<span style="color:#2590FE;padding:0 5px;">{{currBetNum.BetCount}}</span>注，共<span style="color:#2590FE;padding:0 5px;">{{allBetmoney}}</span>元
                </span>
                <div class='dis-spa'>
                    <span>倍数</span>
                    <p class='add-count'>
                        <span class='hover' @click='reduceMul'>-</span>
                        <span style="color:#2590FE;" v-text='currBetNum.Multiple'>0</span>
                        <span class='hover' @click="currBetNum.Multiple++;">+</span>
                    </p>
                </div>
                <div class='dis-spa'>
                    <span>模式</span>
                    <div id='select-change' style="width:100px;margin-left:10px;">
                        <el-select v-model="currBetNum.UnitPrice" placeholder="元">
                            <el-option key="1" label="元" :value="PRICE">
                            </el-option>
                            <el-option key="2" label="角" :value="PRICE/10">
                            </el-option>
                            <el-option key="3" label="分" :value="PRICE/100">
                            </el-option>
                        </el-select>
                    </div>

                    <!-- <el-dropdown class='pattern' trigger='click'>
                        <span class="el-dropdown-link">
                            元<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>元</el-dropdown-item>
                            <el-dropdown-item>角</el-dropdown-item>
                            <el-dropdown-item>分</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown> -->
                </div>
                <!-- <div class='dis-spa'>
                    <span>模式</span>
                    <el-dropdown class='pattern' trigger='click' placement='bottom-start'>
                        <span class="el-dropdown-link">
                            129856<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div> -->
            </div>
            <div class='change-num-right'>
                <button class='hover' @click='addDetail'>确认选号</button>
                <button class='hover' @click='goBetOne'>立即投注</button>
            </div>
        </div>

        <div class='margin-center investment-wrap' id='invest'>
            <div class='investment-left'>
                <div class='dis-spa inve-tit'>
                    <p>
                        <span class='inves-active hover'>预投列表</span>
                        <!-- <span class='hover'>复投列表</span> -->
                    </p>
                    <span class='hover' @click='clearCart'>清空列表</span>
                </div>
                <div id='invest-content'>
                    <div class='dis-spa' v-for='(val,index) in betData.BetInfo.Detail' :key='index'>
                        <p>
                            <span class='tooltip' data-mytooltip-custom-class="tooltip-f7" data-mytooltip-custom-class="align-center" data-mytooltip-offset='20' :data-mytooltip-template="toolDom(val)">[定位胆]{{val.Data.First.length?val.Data.First.join(''):'--'}}，{{val.Data.Second.length?val.Data.Second.join(''):'--'}}，{{val.Data.Third.length?val.Data.Third.join(''):'--'}}，{{val.Data.Fourth.length?val.Data.Fourth.join(''):'--'}}，{{val.Data.Fifth.length?val.Data.Fifth.join(''):'--'}}[{{val.BetCount}}注][{{val.Multiple}}倍][{{isMe(val.UnitPrice)}}][{{comMonByCount(val.BetCount,val.UnitPrice,val.Multiple)}}元]</span>
                            <span style="opacity:0;">我要复投</span>
                        </p>
                        <img class='hover' src="./img/close-x.svg" style="width:10px;height:10px;" @click="clearOneCart(val,index)">
                    </div>
                </div>
            </div>
            <div class='investment-right' id='invest-right'>
                <!-- <p>预投未来期</p>
                <div>
                    <el-dropdown class='pattern' trigger='click' placement='bottom-start'>
                        <span class="el-dropdown-link">
                            129812654456<img src="./img/down.svg" style="width:15px;height:15px;">
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div> -->
                <div>
                    <button class='hover' @click='goBetAll'>一键投注</button>
                </div>
                <div>
                    <span>总注数：</span>
                    <span style="color:#2590fe;" v-text='cartAllBetCount'>0</span>
                    <span>注，总金额：</span>
                    <span style="color:#2590fe;" v-text='betData.BetAmount'>0</span>
                    <span>元</span>
                </div>
            </div>
        </div>

    </div>

    <script>
        // 投注了要刷新投注列表（没做）
        var app = new Vue({
            el: '#app',
            data: {
                //用户信息
                userInfo: {},
                //用户余额
                userBalance: 0,
                //当前可投注的彩期
                betRound: {
                    EndBetTime: "",
                    EndTime: '',
                    RoundID: ''
                },
                //上一彩期的结果
                lastRount: {
                    "RoundID": "",
                    "StartTime": "",
                    "EndBetTime": "",
                    "EndTime": "",
                    "Result": "",
                    "IsCancel": false
                },
                //当前选择的投注号码
                currBetNum: {
                    //单价
                    UnitPrice: PRICE,
                    //倍数
                    Multiple: 1,
                    //注数
                    BetCount: 0,
                    //个十百数据
                    Data: {
                        //万
                        First: [],
                        //千
                        Second: [],
                        //百
                        Third: [],
                        //十
                        Fourth: [],
                        //个
                        Fifth: []
                    }
                },
                //当前选择注数总金额
                allBetmoney: 0,
                //投注数据  购物车
                betData: {
                    "LotteryType": 1,
                    "LotteryID": 1,
                    "PlayType": 1,
                    //期号
                    // "roundID": '20190129051',
                    //投注总额
                    "BetAmount": 0,
                    "BetSource": "PC",
                    "BetInfo": {
                        //订单数
                        OrderCount: 0,
                        Detail: []
                    }
                },
                //投注记录页码
                betPage: 1,
                //投注记录
                betList: [],
                //历史开奖记录
                hisList: [],
                //上一期彩期开奖号码图片数组
                lastNum: [],
                //可投注的剩餘時間图片数组
                timeNum: ['./img/0.png', './img/0.png', './img/0.png', './img/0.png', './img/0.png', './img/0.png'],
                //控制忘记密码
                offSetPas: false,
                //控制复投弹窗
                offFutou: false,
                //控制玩法  wuxinFu:五星-直选复式  wuxinDan：五星-直选单式    daxiaoqianer：前二大小单双   dinwei：定位胆默认
                meth: 'dinwei',
                //改变游戏   wuxin：五星    daxiao：大小单双    dinwei:定位胆
                play: 'dinwei',
                //1：绑定支付宝  2：绑定银行卡
                bindAB: false
            },
            created: function() {
                // $.cookie('token')
                if (_getItem('token')) {
                    //刷新token
                    this.refreshToken();
                }
                //获取当前可投注的彩期
                this.getBetRound();
                //获取历史彩期
                this.getHisRes();
            },
            mounted: function() {
                var This = this;
                //初始化tooltip
                this.$nextTick(function() {
                    This.setHei();
                    $('.tooltip').myTooltip();
                    This.replaceImg();
                });
            },
            watch: {
                //监控改变玩法
                play: function() {
                    this.setHei();
                },
                //监控玩法细则
                meth: function() {
                    this.setHei();
                },
                //监听当前选择变化
                currBetNum: {
                    handler: function(val) {
                        this.allMoneyChange();
                    },
                    deep: true
                },
                //监控购物车的变化
                betData: {
                    handler: function(val) {
                        this.$nextTick(function() {
                            this.setHei();
                            $('.tooltip').myTooltip();
                        });
                    },
                    deep: true
                }
            },
            computed: {
                //购物车里面的总注数
                cartAllBetCount: function() {
                    var num = 0;
                    var arr = this.betData.BetInfo.Detail;
                    for (var i = 0; i < arr.length; i++) {
                        num += arr[i].BetCount;
                    }
                    return num;
                }
            },
            methods: {
                //减倍数
                reduceMul: function() {
                    if (this.currBetNum.Multiple <= 1) {
                        return;
                    }
                    this.currBetNum.Multiple--;
                },
                //实时监控投注金钱的变动
                allMoneyChange: function() {
                    var money = 0;
                    var baseMon = _accMul(parseInt(this.currBetNum.BetCount), PRICE);
                    switch (parseFloat(this.currBetNum.UnitPrice)) {
                        case PRICE:
                            money = baseMon;
                            break;
                        case PRICE / 10:
                            money = _accDiv(baseMon, 10);
                            break;
                        case PRICE / 100:
                            money = _accDiv(baseMon, 100);
                            break;
                    }
                    this.allBetmoney = _accMul(money, parseInt(this.currBetNum.Multiple));
                },
                //加入购物车
                addDetail: function() {
                    if (!this.currBetNum.BetCount) {
                        this.$message.error('请选择投注的号码！');
                        return;
                    }
                    this.betData.BetInfo.Detail.push(this.currBetNum);
                    //刷新购物车里面的各种钱
                    this.refreshCart();
                    //清空当前的投注
                    this.clearCurrBet();
                },
                //刷新购物车里面的各种钱
                refreshCart: function() {
                    var bet = this.betData;
                    var arr = this.betData.BetInfo.Detail;
                    this.betData.BetInfo.OrderCount = arr.length;
                    var allMoney = 0;
                    for (var i = 0; i < arr.length; i++) {
                        allMoney = _accAdd(this.comMonByCount(arr[i].BetCount, arr[i].UnitPrice, arr[i].Multiple), allMoney);
                    }
                    this.betData.BetAmount = allMoney;
                },
                //根据注数，单价，倍数来计算总钱
                comMonByCount: function(BetCount, UnitPrice, Multiple) {
                    var money = 0;
                    var baseMon = _accMul(parseInt(BetCount), PRICE);
                    switch (parseFloat(UnitPrice)) {
                        case PRICE:
                            money = baseMon;
                            break;
                        case PRICE / 10:
                            money = _accDiv(baseMon, 10);
                            break;
                        case PRICE / 100:
                            money = _accDiv(baseMon, 100);
                            break;
                    }
                    return _accMul(money, parseInt(Multiple));
                },
                //清空当前的投注
                clearCurrBet: function() {
                    var curr = {
                        //单价
                        UnitPrice: PRICE,
                        //倍数
                        Multiple: 1,
                        //注数
                        BetCount: 0,
                        //个十百数据
                        Data: {
                            //万
                            First: [],
                            //千
                            Second: [],
                            //百
                            Third: [],
                            //十
                            Fourth: [],
                            //个
                            Fifth: []
                        }
                    };
                    this.currBetNum = curr;
                    $('.rule-num-active').removeClass('rule-num-active');
                },
                //清空购物车
                clearCart: function() {
                    this.betData = {
                        "LotteryType": 1,
                        "LotteryID": 1,
                        "PlayType": 1,
                        //期号
                        // "roundID": '20190129051',
                        //投注总额
                        "BetAmount": 0,
                        "BetSource": "PC",
                        "BetInfo": {
                            //订单数
                            OrderCount: 0,
                            Detail: []
                        }
                    };
                },
                //清空购物车里面的某一个数据
                clearOneCart: function(val, index) {
                    var data = this.betData.BetInfo.Detail[index];
                    if (data.BetCount == val.BetCount) {
                        this.betData.BetInfo.Detail.splice(index, 1);
                        //刷新购物车里面的各种钱
                        this.refreshCart();
                    }
                },
                //选择号码总逻辑
                changeNum: function(type, ev) {
                    //     {
                    //     单价
                    //     UnitPrice: 2.0,
                    //     //倍数
                    //     Multiple: 1,
                    //     //注数
                    //     BetCount: 0,
                    //     //个十百数据
                    //     Data: {
                    //         //万
                    //         First: [],
                    //         //千
                    //         Second: [],
                    //         //百
                    //         Third: [],
                    //         //十
                    //         Fourth: [],
                    //         //个
                    //         Fifth: []
                    //     }
                    // },
                    var This = this;
                    var font = ev.target.innerHTML;
                    var html = parseInt(font);
                    var arr = This.currBetNum.Data[type];
                    var el = $(ev.target);
                    if (String(html).toLowerCase() != 'nan') {
                        var index = arr.indexOf(html);
                        if (index == -1) {
                            el.addClass('rule-num-active');
                            arr.push(html);
                        } else {
                            el.removeClass('rule-num-active');
                            arr.splice(index, 1);
                        }
                    } else if (font.indexOf('位') == -1) {
                        var spanEl = $(el.parent().parent().children()[0]).find('span');
                        spanEl.removeClass('rule-num-active');
                        switch (font) {
                            case '全':
                                arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
                                spanEl.addClass('rule-num-active');
                                break;
                            case '大':
                                arr = [5, 6, 7, 8, 9];
                                for (var i = 6, j = 0; j < arr.length; i++, j++) {
                                    spanEl.eq(i).addClass('rule-num-active');
                                }
                                break;
                            case '小':
                                arr = [0, 1, 2, 3, 4];
                                for (var i = 0; i < arr.length + 1; i++) {
                                    spanEl.eq(i).addClass('rule-num-active');
                                }
                                break;
                            case '奇':
                                arr = [1, 3, 5, 7, 9];
                                for (var i = 0; i < 10; i++) {
                                    if (i % 2 != 0) {
                                        spanEl.eq(i + 1).addClass('rule-num-active');
                                    }
                                }
                                break;
                            case '偶':
                                arr = [0, 2, 4, 6, 8];
                                for (var i = 0; i < 10; i++) {
                                    if (i % 2 == 0) {
                                        spanEl.eq(i + 1).addClass('rule-num-active');
                                    }
                                }
                                break;
                            case '清':
                                arr = [];
                                break;
                        }
                        This.currBetNum.Data[type] = arr;
                    }
                    var allBetArr = This.currBetNum.Data;
                    This.currBetNum.BetCount = 0;
                    for (var key in allBetArr) {
                        for (var j = 0; j < allBetArr[key].length; j++) {
                            This.currBetNum.BetCount++;
                        }
                    }
                },
                //立即投注
                goBetOne: function() {
                    if (parseFloat(this.allBetmoney) <= 0) {
                        this.$message.error('请选择投注的号码！');
                        return;
                    }
                    var token = _getItem('token');
                    if (!token) {
                        this.$message.error('请登录再试！');
                        setTimeout(function() {
                            _openHref({
                                url: './login.html'
                            });
                        }, 1500);
                        return;
                    }
                    var This = this;
                    var data = {
                        "LotteryType": 1,
                        "LotteryID": 1,
                        "PlayType": 1,
                        //期号
                        "roundID": this.betRound.RoundID,
                        //投注总额
                        "BetAmount": this.allBetmoney,
                        "BetSource": "PC",
                        "BetInfo": {
                            //订单数
                            OrderCount: 1,
                            Detail: []
                        }
                    };
                    data.BetInfo.Detail.push(this.currBetNum);
                    data.BetInfo = JSON.stringify(data.BetInfo);
                    $.ajax({
                        url: GO_BET,
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json",
                        headers: {
                            Authorization: token
                        },
                        data: JSON.stringify(data),
                        success: function(res) {
                            console.log("简单投注参数++");
                            console.log(data);
                            console.log('简单投注返回');
                            console.log(res);
                            if (res.Status == 0) {
                                This.$message.error('投注成功，个人中心账单可查看投注记录！');
                                This.userBalance = res.Data;
                                //清空当前的投注
                                This.clearCurrBet();
                            } else {
                                This.$message.error('投注失败！');
                            }
                        },
                        error: function() {
                            This.$message.error('服务器开小差了!');
                        }
                    });
                },
                //购物车投注
                goBetAll: function() {
                    var This = this;
                    var betSend = JSON.parse(JSON.stringify(this.betData));
                    if (parseFloat(betSend.BetAmount) <= 0) {
                        this.$message.error("请选择一键投注的号码！");
                        return;
                    }
                    var token = _getItem('token');
                    if (!token) {
                        this.$message.error('请登录再试！');
                        setTimeout(function() {
                            _openHref({
                                url: './login.html'
                            });
                        }, 1500);
                        return;
                    }
                    betSend.roundID = this.betRound.RoundID;
                    betSend.BetInfo = JSON.stringify(betSend.BetInfo);
                    // var data = {
                    //     "LotteryType": 1,
                    //     "LotteryID": 1,
                    //     "PlayType": 1,
                    //     //期号
                    //     "roundID": this.betRound.RoundID,
                    //     //投注总额
                    //     "BetAmount": 2,
                    //     "BetSource": "PC",
                    //     "BetInfo": JSON.stringify({
                    //         //订单数
                    //         OrderCount: 1,
                    //         Detail: [{
                    //             //单价
                    //             UnitPrice: 2.0,
                    //             //倍数
                    //             Multiple: 1,
                    //             //注数
                    //             BetCount: 1,
                    //             //个十百数据
                    //             Data: {
                    //                 First: [0],
                    //                 // Second: [0, 1],
                    //                 // Third: [0, 1],
                    //                 // Fourth: [0, 1],
                    //                 // Fifth: [0, 1]
                    //             }
                    //         }]
                    //     })
                    // };
                    // var detArr=this.betData.BetInfo.Detail;
                    $.ajax({
                        url: GO_BET,
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json",
                        headers: {
                            Authorization: token
                        },
                        data: JSON.stringify(betSend),
                        success: function(data) {
                            if (data.Status == 0) {
                                This.$message.error('投注成功，个人中心账单可查看投注记录！');
                                This.userBalance = data.Data;
                                //清空购物车
                                This.clearCart();
                            } else {
                                This.$message.error('投注失败！');
                            }
                            console.log('购物车参数+++');
                            console.log((betSend));
                            console.log('一键投注返回');
                            console.log(data);
                        },
                        error: function() {
                            This.$message.error('服务器开小差了!');
                        }
                    });
                },
                //获取用户信息
                getMemberInfo: function() {
                    var This = this;
                    AJAX({
                        url: GET_USER,
                        token: true,
                        app: this,
                        success: function(data) {
                            if (data.Status == '0') {
                                console.log('suer')
                                console.log(data.Data)
                                localStorage.setItem('shi_user', JSON.stringify(data.Data));
                                This.userInfo = data.Data;
                            } else {
                                This.$message.error('获取用户信息失败！');
                            }
                        }
                    });
                },
                //获取用户余额
                getBalance: function() {
                    var This = this;
                    AJAX({
                        url: GET_BANLANCE,
                        token: true,
                        app: this,
                        success: function(data) {
                            if (data.Status == '0') {
                                This.userBalance = data.Data;
                            } else {
                                This.$message.error('获取用户余额失败！');
                            }
                        }
                    })
                },
                //获取当前可投注的彩期
                getBetRound: function() {
                    var This = this;
                    AJAX({
                        url: BETROUND,
                        app: this,
                        data: {
                            lotteryType: 1,
                            lotteryId: 1
                        },
                        success: function(data) {
                            if (data.Status == '0') {
                                This.betRound = data.Data;
                                //开启彩期倒计时
                                This.roundTime();
                            } else {
                                This.$message.error('获取当前可投注彩期失败！');
                            }
                        }
                    });
                },
                //获取历史投注彩期结果
                getHisRes: function() {
                    var This = this;
                    AJAX({
                        url: HIS_RESULT,
                        app: this,
                        data: {
                            lotteryType: 1,
                            lotteryId: 1,
                            count: 6
                        },
                        success: function(data) {
                            if (data.Status == '0') {
                                //默认展示历史开奖的第一个数据
                                This.lastRount = data.Data[0];
                                This.lastNumImg();
                                var arr = []
                                for (var i = 0; i < data.Data.length; i++) {
                                    if (i != 0 && i <= 5) {
                                        arr.push(data.Data[i]);
                                    }
                                }
                                This.hisList = arr;
                            } else {
                                This.$message.error('获取历史开奖记录失败!');
                            }
                        }
                    });
                },
                //获取投注列表
                // getBetList: function() {
                //     var This = this;
                //     AJAX({
                //         url: GET_BET_LIST,
                //         app: this,
                //         token: true,
                //         data: {
                //             pageIndex: this.betPage,
                //             pageSize: 10,
                //             desc: true
                //         },
                //         success: function(data) {
                //             if (data.Status == '0') {
                //                 if (!data.Data || String(data.Data) == 'null') {
                //                     return;
                //                 }
                //                 var bets = data.Data.Bets;
                //                 if (this.betPage == 1) {
                //                     This.betList = bets;
                //                 } else {
                //                     for (var i = 0; i < bets.length; i++) {
                //                         This.betList.push(bets[i]);
                //                     }
                //                 }
                //             } else {
                //                 This.$message.error('获取投注记录失败!');
                //             }
                //         }
                //     });
                // },
                //当前投注彩期倒计时
                roundTime: function() {
                    if (!this.betRound.EndTime) {
                        this.$message.error('剩余投注时间有误，请联系管理员！');
                        return;
                    } else {
                        var This = this;
                        var roTime = Date.parse(new Date(this.betRound.EndTime));
                        var nowTime = Date.parse(new Date());
                        var disS = parseInt(Math.abs(roTime - nowTime) / 1000);
                        var time = setInterval(function() {
                            if (disS-- <= 1) {
                                //本轮投注结束
                                clearInterval(time);
                                setTimeout(function() {
                                    //定时获取本轮结果
                                    This.getCurrRes(This.betRound.RoundID);
                                    //再去获取可投注的彩期
                                    This.getBetRound();
                                }, 2000);
                            } else {
                                This.comS(disS);
                            }
                        }, 1000);
                    }
                },
                //计算剩余投注时间
                comS: function(now) {
                    var hour = parseInt(now / 3600) % 24;
                    var arr = [];
                    arr.push(this.chanImg(String(addZero(hour))[0]));
                    arr.push(this.chanImg(String(addZero(hour))[1]));

                    var minutes = parseInt(now / 60) % 60;
                    arr.push(this.chanImg(String(addZero(minutes))[0]));
                    arr.push(this.chanImg(String(addZero(minutes))[1]));

                    var seconds = parseInt(now % 60);
                    arr.push(this.chanImg(String(addZero(seconds))[0]));
                    arr.push(this.chanImg(String(addZero(seconds))[1]));

                    this.timeNum = arr;

                    function addZero(n) {
                        return n >= 10 ? n : "0" + n;
                    }
                },
                //购物车展示 是什么模式
                isMe: function(price) {
                    switch (parseFloat(price)) {
                        case PRICE:
                            return '元模式';
                            break;
                        case PRICE / 10:
                            return '角模式';
                            break;
                        case PRICE / 100:
                            return '分模式';
                            break;
                    }
                },
                //选择剩余时间的图片
                chanImg: function(str) {
                    switch (str) {
                        case '0':
                            return './img/0.png';
                            break;
                        case '1':
                            return './img/1.png';
                            break;
                        case '2':
                            return './img/2.png';
                            break;
                        case '3':
                            return './img/3.png';
                            break;
                        case '4':
                            return './img/4.png';
                            break;
                        case '5':
                            return './img/5.png';
                            break;
                        case '6':
                            return './img/6.png';
                            break;
                        case '7':
                            return './img/7.png';
                            break;
                        case '8':
                            return './img/8.png';
                            break;
                        case '9':
                            return './img/9.png';
                            break;
                    }
                },
                //改拿本期的结果了
                getCurrRes: function(id) {
                    var This = this;
                    AJAX({
                        url: ROUND_RESULT,
                        app: this,
                        data: {
                            lotteryType: 1,
                            lotteryId: 1,
                            roundId: id
                        },
                        success: function(data) {
                            if (data.Status == '0') {
                                if (data.Data.Result) {
                                    var last = This.lastRount;
                                    This.hisList.splice(0, 1, last);
                                    This.lastRount = data.Data;
                                    //改变开奖号码
                                    This.lastNumImg();
                                }
                            } else {
                                This.$message.error('获取上一彩期结果失败');
                            }
                        }
                    });
                },
                //得到开奖号码
                lastNumImg: function() {
                    var arr = [];
                    if (!this.lastRount.Result) {
                        return;
                    }
                    var res = String(this.lastRount.Result);
                    for (var i = 0; i < res.length; i++) {
                        switch (res[i]) {
                            case '0':
                                arr.push('./img/-0.png');
                                break;
                            case '1':
                                arr.push('./img/-1.png');
                                break;
                            case '2':
                                arr.push('./img/-2.png');
                                break;
                            case '3':
                                arr.push('./img/-3.png');
                                break;
                            case '4':
                                arr.push('./img/-4.png');
                                break;
                            case '5':
                                arr.push('./img/-5.png');
                                break;
                            case '6':
                                arr.push('./img/-6.png');
                                break;
                            case '7':
                                arr.push('./img/-7.png');
                                break;
                            case '8':
                                arr.push('./img/-8.png');
                                break;
                            case '9':
                                arr.push('./img/-9.png');
                                break;
                        }
                    }
                    return this.lastNum = arr;
                },
                //刷新token
                refreshToken: function() {
                    var This = this;
                    AJAX({
                        url: REFRESH_TOKEN,
                        token: true,
                        app: this,
                        success: function(data) {
                            if (data.Status == '0') {
                                var curr = Date.parse(new Date()) / 1000;
                                if (localStorage.getItem('time')) {
                                    curr += 604800;
                                    localStorage.setItem('time', '7');
                                } else {
                                    curr += 86400;
                                }
                                // $.cookie('token', data.Data, {
                                //     expires: 7,
                                //     path: '/'
                                // });
                                _setItem('token', data.Data, curr);
                                //获取用户余额
                                This.getBalance();
                                //获取用户信息
                                This.getMemberInfo();
                                //获取投注列表
                                // This.getBetList();
                            } else {
                                // $.cookie('token', '');
                                localStorage.setItem('token', '');
                                This.$message.error('自动登录失败,请重新登录!');
                                setTimeout(function() {
                                    _openHref({
                                        url: './login.html'
                                    });
                                }, 1500);
                            }
                        }
                    });
                },
                //动态设置投注列表的高度
                setHei: function() {
                    this.$nextTick(function() {
                        var winHei = $(window).height();
                        var top = $('#invest').offset().top;
                        var reHei = winHei - top - 45;
                        if (reHei < 200) {
                            reHei = 200;
                        }
                        $('#invest-content').height(reHei);
                        $('#invest-right').height(reHei + 34);
                    });
                },
                //改变下级玩法的控制
                changeMeth: function(play, ev) {
                    var el = $(ev.target);
                    $('.play-meth-active').removeClass('play-meth-active');
                    el.addClass('play-meth-active');
                    this.meth = play;
                    // This.setHei();
                    //初始化tooltip
                    this.$nextTick(function() {
                        $('.tooltip').myTooltip();
                    });
                },
                //改变上级几星玩法
                changePlay: function(play, ev) {
                    var el = $(ev.target);
                    var This = this;
                    $('.game-meth-active').removeClass('game-meth-active');
                    el.addClass('game-meth-active');
                    this.play = play;
                    switch (play) {
                        case 'wuxin':
                            This.meth = 'wuxinFu';
                            break;
                        case 'daxiao':
                            This.meth = 'daxiaoqianer';
                            break;
                        case 'dinwei':
                            This.meth = 'dinwei'
                            break;
                    }
                    // This.setHei();
                    //初始化tooltip
                    this.$nextTick(function() {
                        $('.tooltip').myTooltip();
                    });
                },
                //开奖与否的伸缩控制
                toggLo: function(ev) {
                    var el = $(ev.target);
                    var togg = el.attr('togg');
                    if (togg == '1') {
                        el.attr('togg', '0');
                        $('#lottery').slideDown(200);
                    } else {
                        el.attr('togg', '1');
                        $('#lottery').slideUp(200);
                    }
                },
                //tooltip的数据生成
                toolDom: function(val) {
                    var first = val.Data.First.length ? val.Data.First.join('') : '--';
                    var second = val.Data.Second.length ? val.Data.Second.join('') : '--';
                    var third = val.Data.Third.length ? val.Data.Third.join('') : '--';
                    var fourth = val.Data.Fourth.length ? val.Data.Fourth.join('') : '--';
                    var fifth = val.Data.Fifth.length ? val.Data.Fifth.join('') : '--';
                    var num = first + ',' + second + ',' + third + ',' + fourth + ',' + fifth;
                    var dom = "<div class='tooltip-f7'><p><span>玩法：</span><span>定位胆</span></p> <p><span>号码：</span><span>" + num + "</span></p> <p><span>模式：</span><span>" + this.isMe(val.UnitPrice) + "</span></p> <p>共<span style='color:#2590fe;'>" + val.BetCount + "</span>注，<span style='color:#2590fe;'>" + val.Multiple + "</span>倍，共计<span style='color:#2590fe;'>" + this.comMonByCount(val.BetCount, val.UnitPrice, val.Multiple) + "</span>元</p></div>";
                    return dom;
                },
                //查看范例tooltip数据
                likeExa: function(type) {
                    var dom = '';
                    switch (type) {
                        // 投注方案：1；开奖号码万位：1，即中定位胆万位一等奖。
                        case 'dinwei':
                            dom = "<div class='tooltip-f7'><p><span>投注方案：</span></p><p><span>1；开奖号码万位：1，即中定位胆万位一等奖</span></p></div>";
                            break;
                        default:
                            dom = "<div class='tooltip-f7'><p><span>投注方案：</span><span>1254511</span></p><p><span>开奖号码：</span><span>1212312，即中5星直选</span></p></div>";
                    }
                    return dom;
                },
                //替换select的样式
                replaceImg: function() {
                    this.$nextTick(function() {
                        var par = $('.el-input__suffix-inner');
                        par.children().remove();
                        par.append('<img src="./img/down.svg" style="opacity:.5; width:20px; height:20px">');
                    });
                }
            }
        });
    </script>

</body>

</html>